<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-JSONP</title>
</head>

<body>
    <button id="btn">发ajax请求(jsonp)</button>
    <script>
        document.querySelector('#btn').onclick = () => {
            const script = document.createElement('script')
            script.src = 'http://localhost:8081/jsonp-server?callback=fn'
            document.body.appendChild(script)
            console.log(script)
        }

        /*原理：
        1.浏览器端声明fn函数
        2.通过query参数将函数名传递到服务端
        3.服务端通过函数名fn组合需要调用的参数，结果为json字符串的fn(data)
        4.将json字符串fn(data)返回浏览器，浏览器接收到解析为js程序的同时就会运行
        5.运行函数fn(data)会查找函数名fn，在浏览器端已经声明叫fn的函数，
        6.所以在浏览器端调用fn函数并传入了服务器端的data数据
        */ 
        function fn(data) {
            console.log(data)
        }

    </script>
</body>

</html>